<template>
	<view class="detail_page">
		<view class="top_box">
			<view class="tabs_box">
				<u-tabs :list="list1" lineWidth="40" lineColor="#00CC7B" :activeStyle="{'color':'#00CC7B'}"
					@click="change" :itemStyle="{'width':'150rpx','height':'88rpx',}"></u-tabs>
			</view>
			<view style="display: flex;">
				<view class="time">{{time}}</view>
				<u-icon name="arrow-down" size="20" @click="show=!show"></u-icon>
			</view>
			<u-datetime-picker :show="show" v-model="value1" mode="year-month" @cancel="close" @close="close" @confirm="confirm" closeOnClickOverlay>
			</u-datetime-picker>
		</view>
		<scroll-view class="sv">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="type">
					<view style="font-size: 28rpx;font-weight: bold;">{{item.memo}}</view>
					<view style="font-size: 28rpx;font-weight: bold;color: #00CC7B;">{{item.money}}</view>
				</view>
				<!-- <view v-show="order" class="order_name">订单名称名称名称名称名称名称名称名称名称...</view> -->
				<view class="time">{{item.createtime_text}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {dateformat} from "../../common/js/utils.js"
	import { accountDetail } from "../../api/index.js"
	export default {
		data() {
			return {
				order:false,
				list:[],
				index:0,
				list1: [{
					name: '全部'
				}, {
					name: '收入'
				}, {
					name: '支出'
				}],
				show: false,
				time:'',
				value1:''
			}
		},
		onShow() {
			let p = new Date().getTime()
			this.time=dateformat(p,'Y-M')
			this.value1=dateformat(p,'Y-M')
			this.getData()
		},
		methods: {
			getData(){
				let p={
					type:this.index,
					times:this.time
				}
				accountDetail(p).then(res=>{
					console.log(res);
					this.list=res.data.data
				})
			},
			change(e) {
				console.log(e);
				this.index=e.index
				this.getData()
			},
			close(){
				this.show=false
			},
			confirm(e){
				this.time=dateformat(e.value,'Y-M')
				this.show=false
				this.getData()
				console.log(this.time);
			}
		}
	}
</script>

<style scoped lang="scss">
	.detail_page {
	}

	.top_box {
		width: 100%;
		height: 88rpx;
		display: flex;

		.tabs_box {
			width: 60%;
			height: 100%;

			.tab {
				background-color: red;
			}
		}

		.time {
			color: #333333;
			font-size: 28rpx;
			line-height: 88rpx;
			margin-left: 100rpx;
			margin-right: 16rpx;
		}
	}
    .item{
		width: 100%;
		height: auto;
		min-height: 156rpx;
		padding: 32rpx;
		border-bottom: 2rpx #FAFAFA solid;
		.type{
			display: flex;
			justify-content: space-between;
		}
		.order_name{
			margin-top: 16rpx;
			font-size: 24rpx;
			color: #666666;
			width: 486rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.time{
			font-size: 24rpx;
			color:#666666;
			margin-top: 16rpx;
		}
	}
	.sv{
		width: 100%;
		height: 89vh;
	}
</style>